<template>
    <div style="margin-top: 00px">
        <div style="width:100px; height:50px;" id="firstCard">

        </div>
        <el-card style="background-color:rgb(249, 225, 235)">
            <div style="display: flex;">
                <div style="width: 300px">
                    <el-image :src="flower.img" :previer-src-list="[flower.img]" style="width: 100%; margin-left: 80px"></el-image>
                </div>
                <div style="flex: 1; padding-left: 50px; margin-left: 30px">
                    <div class="item1"><h1>{{ flower.name }}<span class="item7">{{ flower.constitute }}</span></h1></div>
                    <!-- <div class="item7"><h1>{{ flower.constitute }}</h1></div> -->
                    <div class="item2">{{ flower.description }}</div>
                    <div class="item8">适合对象：{{ flower.targets }}</div>
                    <div v-if="hasDiscount"  class="item3">
                        <label style="font-size: 22px; color:brown">原价：</label>
                        <span style="font-size:29px;">￥{{ flower.price }}.00</span>
                    </div>
                    <div v-else class="item3">
                        <label style="font-size: 22px; color:brown">价格：</label>
                        <span style="font-size:29px;">￥{{ flower.price }}.00</span>
                    </div>
                    <div v-if="hasDiscount">
                        <label style="padding: 7px; color:red; margin-left:180px; margin-top:11px; font-size:24px; font-weight:600;">优惠后：</label>
                        <span style="color:red; font-weight:700; font-size:32px">￥{{ newPrice }}</span>
                    </div>
                    <div class="item4" style="margin-top:0px;">
                        <label style="font-size: 22px; color:brown">购买数量：</label>
                        <el-input-number v-model="form.num" :min="1" :max="100" label="购买数量" size="small"></el-input-number>
                    </div>
                    <div style="margin-left:90px;">
                        <el-button class="item5" size="medium" v-on:click="addCart"><b style="font-size: 17px"><i class="el-icon-shopping-cart-2" size="medium"></i> 加入购物车</b></el-button>
                        <!-- <el-button class="item6" size="medium" @click="buy"><b style="font-size: 16px">点击购买</b></el-button> -->
                    </div>
                    <div style="margin-top:-190px; padding-bottom:100px">
                        <div v-if="hasDiscount" style="width: 100%; display: inline-block; margin-left:230px; color:blueviolet;">
                            <el-statistic :value="deadline2" time-indices title="八折优惠">
                                <!-- <template slot="suffix"> <span style="font-size:20px">结束</span> </template> -->
                                <template slot="prefix"> <span style="font-size:20px; font-weight:50">仅剩下 </span> </template>
                                <!-- <template slot="title"><span style="font-size:22px; color:blueviolet; font-weight:600">八折优惠</span></template> -->
                                <template slot="title">
                                        <span style="display:block; font-size:25px; font-weight:600">{{ explains }}</span>
                                        <span style="color:red; font-size:25px; font-weight:600">{{discount}}</span><span style="font-size:25px">优惠</span>
                                </template>
                            </el-statistic>
                        </div> 
                    </div>

                </div>
            </div>
        </el-card>

        <div style="margin-top:10px">
            <el-tabs stretch="true" class="tabsBackground">
                <el-tab-pane>
                    <span slot="label" style="font-size:24px;"> 鲜花详情</span>
                    <div class="" style="height:540px; margin-left:100px">
                        <span class="detailMessage">鲜花名称：</span><span style="font-size:17px">{{ flower.name }}</span>
                        <el-divider></el-divider>
                        <span class="detailMessage">鲜花描述：</span><span style="font-size:17px">{{ flower.constitute }}</span>
                        <el-divider></el-divider>
                        <span class="detailMessage">鲜花单价：</span><span style="font-size:17px">￥{{ flower.price }}.00</span>
                        <el-divider></el-divider>
                        <span class="detailMessage">鲜花销量：</span><span style="font-size:17px">{{ flower.sales }}</span>
                        <el-divider></el-divider>
                        <span class="detailMessage">鲜花花语：</span><span style="font-size:17px">{{ flower.description }}</span>
                        <el-divider></el-divider>
                        <span class="detailMessage">鲜花适合对象：</span><span style="font-size:17px">{{ flower.targets }}</span>
                        <el-divider></el-divider>
                        <span class="detailMessage">鲜花上架时间：</span><span style="font-size:17px">{{ flower.createTime }}</span>
                        
                    </div>
                </el-tab-pane>

                <el-tab-pane>
                    <span slot="label" style="font-size:24px"> 鲜花评论</span>
                    <div class="" style="height:740px">
                        <!-- <div style="margin: 20px 0">
                            <el-rate v-model="value1"></el-rate>
                        </div> -->
                        <div style="margin: 10px 0">
                            <el-input v-model="comment.content" type="textarea" placeholder="请输入评论...." style="width:600px; margin:0 0 0 200px; font-size:16px"></el-input>
                            <div style="text-align:left; margin: 10px 0 0 735px">
                                <el-button @click="submit" type="primary"><span style="font-size:17px">评论</span></el-button>
                            </div>

                            <div style="margin:20px 0 -10px 140px; font-weight:600; font-size:27px; text-align:left">评论列表：</div>
                            <el-divider></el-divider>
                            <div style="margin:50px 0 0 240px;" v-for="item in comments" :key="item.id">
                                <div style=" display:flex;">
                                    <div style="width: 80px"><el-avatar :size="50" :src="'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'"></el-avatar></div>
                                    <div style="flex: 1; margin-left:-10px">
                                        <div>
                                            <b style="font-size:20px">{{ item.username }}</b>
                                            <span style="margin-left:20px">{{ item.createTime }}</span>
                                        </div>
                                        <div style="margin-top:10px; color: #666">{{ item.content }}</div>
                                        <div>
                                            <el-button style="margin:0 0 0 0px" type="text" @click="reply(item.id,item.username)"><span style="font-size:17px; margin-top:10px">回复</span></el-button>
                                        </div>
                                    </div>
                                </div>

                                <div v-if-="item.children.length" style="width:600px; margin-left:100px">
                                    <div v-for="sub in item.children" :key="sub.id" style="margin: 0 0 0 10px">
                                        <span style="font-size:17px; font-weight:600; margin-right:10px;cursor: pointer" @click="reply(sub.pid,sub.username)">{{ sub.username }}</span>
                                        <span>回复 <span style="color:cornflowerblue">@{{ sub.target }}</span></span>
                                        <span style="margin:0 0 0 10px">：{{ sub.content }}</span>
                                        <span style="float:right">{{ sub.createTime }}</span>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </el-tab-pane>

                <!-- <el-tab-pane>
                    <span slot="label" style="font-size:24px"> 猜你喜欢</span>
                    <div class="" style="height:740px">
                        
                    </div>
                </el-tab-pane> -->
            </el-tabs>

            <el-dialog
                title="回复"
                :visible.sync="dialogVisible"
                width="40%"
                :before-close="handleClose">
                <el-input placeholder="请输入...." v-model="replyComment.content" type="textarea" style="width:70%; margin-left:60px; font-size:18px"></el-input>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="cancel">取 消</el-button>
                    <el-button type="primary" @click="saveReply">确 定</el-button>
                </span>
            </el-dialog>
        </div>
        
    </div>
</template>

<script>
import moment from 'moment'
export default {
    name: 'Detail',
    data(){
        return{
            hasDiscount: true,
            id: this.$route.query.id,
            flower: {},
            form: { num: 1 },
            user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : [],
            comment:{},
            comments:[],
            dialogVisible:false,
            replyComment:{},
            deadline2: Date.now() + 1000 * 60 * 60 * 8,
            discount: 9,
            explains: '',
            discountNum: 1,
            newPrice:0,
            curentPrice:0,
        }
    },
    created(){
        this.load()
    },
    methods: {
        load(){
            this.request.get('/flower/' + this.id).then(res =>{
                this.flower = res.data
                console.log('笑眯眯',this.flower);
                    this.$el.querySelector("#firstCard").scrollIntoView()
            })

            this.request.get('/comment/getByFlowerId/'+this.id).then(res =>{
                if(res.code === '200'){
                    console.log('喵喵喵',res);
                    this.comments = res.data
                }
            })
            this.getDiffTime();
        },
        buy(){
            this.form.flowerId = this.flower.id
                if(this.newPrice !== 0){
                    console.log('有优惠吗');
                    this.form.price = this.newPrice
                }else{
                    this.form.price = this.flower.price
                }
                console.log('有优惠吗333',this.form);
                let data = { totalPrice:  this.flower.price, carts: this.form}

                this.request.post('/orders/save',data).then(res =>{
                    if(res.code === '200'){
                        this.$notify.success('已生成对应订单！')
                    }else{
                        this.$notify.error(res.msg)
                    }
                })
        },
        getDiffTime(){
            this.request.get('/discounts/getEndTime').then(res =>{
                if(res.code === '200'){
                    if(res.data.id != null){
                        console.log('加入购物车',this.hasDiscount)
                        if(res.proportion === '一折'){
                            this.discountNum = 0.1
                            }else if(res.proportion === '二折'){
                                this.discountNum = 0.2
                            }else if(res.proportion === '三折'){
                                this.discountNum = 0.3
                            }else if(res.proportion === '四折'){
                                this.discountNum = 0.4
                            }else if(res.proportion === '五折'){
                                this.discountNum = 0.5
                            }else if(res.proportion === '六折'){
                                this.discountNum = 0.6
                            }else if(res.proportion === '七折'){
                                this.discountNum = 0.7
                            }else if(res.proportion === '八折'){
                                this.discountNum = 0.8
                            }else{
                                this.discountNum = 0.9
                            }
                            this.newPrice = this.flower.price * this.discountNum
                            this.newPrice = parseFloat(this.newPrice).toFixed(2)
                            console.log('newPrice',this.newPrice)
                            let times=moment(new Date()).format("YYYY-MM-DD");
                            let newData = res.data.endTime.substring(0,10)
                            let date = new Date()
                            let year = date.getFullYear()
                            let dateSpan,tempDate,iDays,date1,date2
                            date1 = Date.parse(newData)
                            date2 = Date.parse(times)
                            dateSpan = date2 - date1
                            dateSpan = Math.abs(dateSpan)
                            iDays = Math.floor(dateSpan / (24 * 3600 * 1000))
                            this.deadline2 = Date.now() + 1000 * 60 * 60 * 24 * iDays
                            this.discount = res.data.proportion
                            this.explains = res.data.explains
                        }else{
                            console.log('没有优惠啦')
                            this.hasDiscount = false
                        }
                    }
            })
            console.log('点击购买',this.hasDiscount)
        },
        reply(pid,name){
            console.log('pid=',pid);
            console.log('name=',name);
            this.replyComment = {pid: pid, userId: this.user.id, username: this.user.name, flowerId:this.flower.id, target:name}
            this.dialogVisible = true;
        },
        saveReply(){
            console.log('进这个方法啦')
            console.log('进这个方法啦111:',this.replyComment)
            this.request.post('/comment',this.replyComment).then(res =>{
                    this.$notify.success('评论成功!')
                    this.load();
                    this.comment = {};
                    this.dialogVisible = false;
            })
        },
        cancel(){
            this.dialogVisible = false;
        },
        submit(){
            this.comment.username = this.user.name;
            this.comment.userId = this.user.id;
            this.comment.flowerId = this.flower.id
            console.log('comment：',this.comment);
            this.request.post('/comment',this.comment).then(res =>{
                    this.$notify.success('评论成功!')
                    this.load();
                    this.comment = {};
            })
        },
        addCart(){
            if(!this.user.username){
                this.$message.warning("加入购物车前,请先登录~")
                return;
            }

            let confirm = false;
                this.form.flowerId = this.flower.id
                if(this.newPrice !== 0){
                    console.log('有优惠吗');
                    this.form.price = this.newPrice
                }else{
                    this.form.price = this.flower.price
                }
                console.log('有优惠吗333',this.form);
                // this.form.price = this.flower.price
                this.request.post("/cart",this.form).then(res =>{
                    if(res.code === "200"){
                        this.$notify.success("加入购物车成功！")
                        // this.$el.querySelector("#firstCard").scrollIntoView()
                    }else{
                        this.$notify.error(res.msg)
                    }
                })
        },
    }
};
</script>

<style scoped>
.item1{
    padding: 10px;
    color:darkgoldenrod;
    margin-left: 190px
}
.item2{
    padding: 3px;
    color:coral;
    margin-left: 130px;
    margin-top: 12px;
    font-size: 17px;
    font-style: italic;
}
.item3{
    padding: 7px;
    color:  chocolate;
    margin-left: 190px;
    margin-top: 7px;
}
.item4{
    padding: 10px;
    margin-left: 160px;
    margin-top: -52px;
}
.item5{
    padding: 10px;
    margin-left: 145px;
    margin-top: 12px;
    color:#fa1d61;
    background-color:#ffeded;
}
.item6{
    padding: 10px;
    margin-left: 40px;
    margin-top: 12px;
    color:#fff;
    background-color:#FB1E63;
}
.item7{
    font-size: 18px;
    padding: 10px;
    margin-left: 60px;
    margin-top: 12px;
    color:darksalmon;
    /* background-color:#FB1E63; */
}
.item8{
    font-size: 18px;
    padding: 10px;
    margin-left: 140px;
    margin-top: 5px;
    color:darksalmon;
    /* background-color:#FB1E63; */
}

.tabsBackground{
    background-color: #FAACA8;
background-image: linear-gradient(19deg, #FAACA8 0%, #DDD6F3 100%);
}

.detailMessage{
    color: #fa1d61;
    font-weight: 600;
    font-size: 20px;
    margin: 0 0 0 230px;
}
</style>

<style>
.isAddCart{
    width: 400px;
    height: 150px;
    /* font-size: 50px; */
}
</style>